import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import axios from 'axios';
import { Search, Plus, Edit, Trash2, Tag, BookOpen, Save, Filter, RefreshCw } from 'lucide-react';
import { Dialog, DialogContent, DialogTitle, Button, Input, Chip, Tooltip } from '@mui/material';
import logger from '../../../utils/logger';

// 样式组件
const Container = styled.div`
  padding: 24px;
  background-color: #f8fafc;
  min-height: 100vh;
`;

const PageTitle = styled.h1`
  font-size: 24px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 24px;
`;

const ControlsBar = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
`;

const SearchBar = styled.div`
  display: flex;
  align-items: center;
  background: white;
  border-radius: 8px;
  padding: 8px 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  flex: 1;
`;

const SearchInput = styled.input`
  border: none;
  outline: none;
  flex: 1;
  margin-left: 8px;
  font-size: 14px;
  color: #334155;
`;

const ActionButton = styled.button`
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  
  ${({ variant }) => {
    switch (variant) {
      case 'primary':
        return `
          background-color: #10b981;
          color: white;
          
          &:hover {
            background-color: #059669;
            transform: translateY(-1px);
          }
        `;
      case 'secondary':
        return `
          background-color: #f3f4f6;
          color: #374151;
          
          &:hover {
            background-color: #e5e7eb;
          }
        `;
      case 'danger':
        return `
          background-color: #ef4444;
          color: white;
          
          &:hover {
            background-color: #dc2626;
          }
        `;
      default:
        return '';
    }
  }}
`;

const TableContainer = styled.div`
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
`;

const Table = styled.table`
  width: 100%;
  border-collapse: collapse;
`;

const TableHeader = styled.th`
  background-color: #f9fafb;
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
  font-size: 14px;
`;

const TableRow = styled.tr`
  &:hover {
    background-color: #f9fafb;
  }
`;

const TableCell = styled.td`
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  color: #111827;
  font-size: 14px;
  
  ${({ isKeyword }) => isKeyword && `
    font-weight: 500;
    color: #10b981;
  `}
`;

const Pagination = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-top: 1px solid #e5e7eb;
  font-size: 14px;
`;

const CategoryChip = styled(Chip)`
  font-size: 12px !important;
  font-weight: 500 !important;
  background-color: #ecfdf5 !important;
  color: #059669 !important;
  border-radius: 12px !important;
  height: 24px !important;
`;

const InterpretationPreview = styled.div`
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
`;

const TagList = styled.div`
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
`;

const TagItem = styled.div`
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background-color: #f0fdf4;
  color: #166534;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
`;

const DreamKeywordManagement = () => {
  // 状态管理
  const [keywords, setKeywords] = useState([]);
  const [filteredKeywords, setFilteredKeywords] = useState([]);
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('all');
  const [loading, setLoading] = useState(true);

  // 页面加载时记录日志
  useEffect(() => {
    logger.info('进入梦境关键词管理页面');
  }, []);
  
  // 模拟数据加载
  useEffect(() => {
    const loadKeywords = async () => {
      try {
        // 在实际应用中，这里应该从API获取数据
        // const response = await axios.get('/api/dream/keywords');
        // setKeywords(response.data);
        
        // 模拟数据
        setTimeout(() => {
          const mockData = [
            {
              id: 1,
              keyword: '飞翔',
              category: '交通',
              interpretation: '通常象征自由、逃避现实或希望超越当前限制。可能表示你在现实生活中渴望获得更多的自由或突破某种束缚。',
              relatedTags: ['自由', '逃避', '希望', '超越'],
              createdAt: '2023-10-01',
              updatedAt: '2023-10-01'
            },
            {
              id: 2,
              keyword: '坠落',
              category: '交通',
              interpretation: '通常反映对失控、不安全感或担心失败的恐惧。可能表示你在现实生活中感到压力或缺乏控制。',
              relatedTags: ['失控', '不安全感', '失败', '压力'],
              createdAt: '2023-10-01',
              updatedAt: '2023-10-01'
            },
            {
              id: 3,
              keyword: '水',
              category: '自然',
              interpretation: '通常象征情感、潜意识或流动的能量。平静的水可能表示平静的情绪，而汹涌的水可能表示强烈的情绪或混乱。',
              relatedTags: ['情感', '潜意识', '流动', '变化'],
              createdAt: '2023-10-01',
              updatedAt: '2023-10-01'
            },
            {
              id: 4,
              keyword: '火灾',
              category: '自然',
              interpretation: '象征强烈的情感、愤怒、转变或破坏性力量。可能表示你正在经历重大变化或内心有未表达的情绪。',
              relatedTags: ['愤怒', '转变', '激情', '破坏性'],
              createdAt: '2023-10-01',
              updatedAt: '2023-10-01'
            },
            {
              id: 5,
              keyword: '考试',
              category: '日常',
              interpretation: '通常反映对表现、评价或准备不足的担忧。可能表示你在现实生活中面临某种考验或挑战。',
              relatedTags: ['压力', '评价', '准备', '挑战'],
              createdAt: '2023-10-01',
              updatedAt: '2023-10-01'
            },
            {
              id: 6,
              keyword: '死亡',
              category: '抽象',
              interpretation: '不一定表示字面意义的死亡，更多象征结束、转变或新的开始。可能表示你正在告别过去的某个部分，迎接新的阶段。',
              relatedTags: ['转变', '结束', '新生', '变革'],
              createdAt: '2023-10-01',
              updatedAt: '2023-10-01'
            },
            {
              id: 7,
              keyword: '飞行',
              category: '交通',
              interpretation: '通常象征自由、逃脱或超越当前限制的愿望。可能表示你在现实生活中感到受限，渴望突破。',
              relatedTags: ['自由', '逃脱', '超越', '冒险'],
              createdAt: '2023-10-01',
              updatedAt: '2023-10-01'
            },
            {
              id: 8,
              keyword: '迷路',
              category: '日常',
              interpretation: '通常反映对生活方向、决策或未来的不确定感。可能表示你在现实生活中感到迷茫或缺乏明确的目标。',
              relatedTags: ['迷茫', '不确定', '决策', '方向'],
              createdAt: '2023-10-01',
              updatedAt: '2023-10-01'
            }
          ];
          setKeywords(mockData);
          setFilteredKeywords(mockData);
          setLoading(false);
        }, 500);
      } catch (error) {
        console.error('加载关键词失败:', error);
        setLoading(false);
      }
    };
    
    loadKeywords();
  }, []);
  
  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
  const [currentKeyword, setCurrentKeyword] = useState(null);
  const [formData, setFormData] = useState({
    keyword: '',
    category: '',
    interpretation: '',
    relatedTags: []
  });
  const [newTag, setNewTag] = useState('');
  
  // 过滤功能
  useEffect(() => {
    let filtered = keywords;
    
    // 搜索过滤
    if (searchTerm) {
      filtered = filtered.filter(keyword => 
        keyword.keyword.toLowerCase().includes(searchTerm.toLowerCase()) ||
        keyword.interpretation.toLowerCase().includes(searchTerm.toLowerCase()) ||
        keyword.relatedTags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()))
      );
    }
    
    // 分类过滤
    if (selectedCategory !== 'all') {
      filtered = filtered.filter(keyword => keyword.category === selectedCategory);
    }
    
    setFilteredKeywords(filtered);
  }, [searchTerm, selectedCategory, keywords]);
  
  // 获取所有分类
  const categories = ['all', ...new Set(keywords.map(k => k.category))];
  
  // 处理表单输入变化
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };
  
  // 添加标签
  const handleAddTag = () => {
    if (newTag && !formData.relatedTags.includes(newTag)) {
      setFormData(prev => ({
        ...prev,
        relatedTags: [...prev.relatedTags, newTag]
      }));
      setNewTag('');
    }
  };
  
  // 删除标签
  const handleRemoveTag = (tagToRemove) => {
    setFormData(prev => ({
      ...prev,
      relatedTags: prev.relatedTags.filter(tag => tag !== tagToRemove)
    }));
  };
  
  // 处理回车键添加标签
  const handleTagKeyPress = (e) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      handleAddTag();
    }
  };
  
  // 打开添加对话框
  const handleAddClick = () => {
    setFormData({
      keyword: '',
      category: '',
      interpretation: '',
      relatedTags: []
    });
    setNewTag('');
    setIsAddDialogOpen(true);
  };
  
  // 打开编辑对话框
  const handleEditClick = (keyword) => {
    setCurrentKeyword(keyword);
    setFormData({
      keyword: keyword.keyword,
      category: keyword.category,
      interpretation: keyword.interpretation,
      relatedTags: [...keyword.relatedTags]
    });
    setNewTag('');
    setIsEditDialogOpen(true);
  };
  
  // 处理删除
  const handleDelete = async (id) => {
    if (window.confirm('确定要删除这个关键词吗？')) {
      try {
        const keywordToDelete = keywords.find(k => k.id === id);
        // 记录删除关键词操作
        logger.info('删除梦境关键词', { keywordId: id, keyword: keywordToDelete?.keyword });
        
        // 在实际应用中，这里应该调用API删除数据
        // axios.delete(`/api/dream/keywords/${id}`);
        setKeywords(prev => prev.filter(keyword => keyword.id !== id));
      } catch (error) {
        logger.error('删除关键词失败', { keywordId: id, error: error.message });
        console.error('删除关键词失败:', error);
      }
    }
  };
  
  // 处理添加保存
  const handleAddSave = async () => {
    // 验证表单
    if (!formData.keyword || !formData.category || !formData.interpretation) {
      alert('请填写所有必填字段');
      return;
    }

    try {
      // 记录添加关键词操作
      logger.info('添加梦境关键词', { keyword: formData.keyword, category: formData.category });
      
      // 在实际应用中，这里应该调用API添加数据
      // axios.post('/api/dream/keywords', formData);
      const newKeyword = {
        id: Math.max(...keywords.map(k => k.id)) + 1,
        ...formData,
        relatedTags: formData.relatedTags || [],
        createdAt: new Date().toISOString().split('T')[0],
        updatedAt: new Date().toISOString().split('T')[0]
      };
      setKeywords(prev => [...prev, newKeyword]);
      setIsAddDialogOpen(false);
    } catch (error) {
      logger.error('添加关键词失败', { error: error.message });
      console.error('添加关键词失败:', error);
    }
  };
  
  // 处理编辑保存
  const handleEditSave = async () => {
    // 验证表单
    if (!formData.keyword || !formData.category || !formData.interpretation) {
      alert('请填写所有必填字段');
      return;
    }

    try {
      // 记录编辑关键词操作
      logger.info('编辑梦境关键词', { keywordId: currentKeyword.id, keyword: formData.keyword });
      
      // 在实际应用中，这里应该调用API更新数据
      // axios.put(`/api/dream/keywords/${currentKeyword.id}`, formData);
      setKeywords(prev => prev.map(keyword => 
        keyword.id === currentKeyword.id 
          ? { ...keyword, ...formData, updatedAt: new Date().toISOString().split('T')[0] }
          : keyword
      ));
      setIsEditDialogOpen(false);
    } catch (error) {
      logger.error('编辑关键词失败', { keywordId: currentKeyword.id, error: error.message });
      console.error('编辑关键词失败:', error);
    }
  };
  
  if (loading) {
    return (
      <Container>
        <PageTitle>梦境关键词管理</PageTitle>
        <div style={{ textAlign: 'center', padding: '40px', color: '#64748b' }}>
          加载中...
        </div>
      </Container>
    );
  }
  
  return (
    <Container>
      <PageTitle>梦境关键词管理</PageTitle>
      
      <ControlsBar>
        <div style={{ display: 'flex', gap: '12px', flex: 1 }}>
          <SearchBar>
            <Search size={16} color="#64748b" />
            <SearchInput 
              placeholder="搜索关键词、解释..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </SearchBar>
          
          <div style={{ minWidth: '150px' }}>
            <select
              value={selectedCategory}
              onChange={(e) => setSelectedCategory(e.target.value)}
              style={{
                width: '100%',
                padding: '10px 16px',
                border: '1px solid #d1d5db',
                borderRadius: '8px',
                fontSize: '14px',
                backgroundColor: 'white',
                boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)'
              }}
            >
              {categories.map(category => (
                <option key={category} value={category}>
                  {category === 'all' ? '全部分类' : category}
                </option>
              ))}
            </select>
          </div>
        </div>
        
        <div style={{ display: 'flex', gap: '12px' }}>
          <ActionButton variant="secondary" onClick={() => {
            setSearchTerm('');
            setSelectedCategory('all');
          }}>
            <RefreshCw size={16} />
            重置
          </ActionButton>
          <ActionButton variant="primary" onClick={handleAddClick}>
            <Plus size={16} />
            添加关键词
          </ActionButton>
        </div>
      </ControlsBar>
      
      <TableContainer>
        <Table>
          <thead>
            <tr>
              <TableHeader>关键词</TableHeader>
              <TableHeader>分类</TableHeader>
              <TableHeader>解读内容</TableHeader>
              <TableHeader>相关标签</TableHeader>
              <TableHeader>创建时间</TableHeader>
              <TableHeader>操作</TableHeader>
            </tr>
          </thead>
          <tbody>
            {filteredKeywords.map(keyword => (
              <TableRow key={keyword.id}>
                <TableCell isKeyword>
                  <Tooltip title="点击查看详情" arrow>
                    <div style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px' }}>
                      <Tag size={16} color="#10b981" />
                      {keyword.keyword}
                    </div>
                  </Tooltip>
                </TableCell>
                <TableCell>
                  <CategoryChip label={keyword.category} size="small" />
                </TableCell>
                <TableCell>
                  <Tooltip title={keyword.interpretation} arrow placement="top">
                    <InterpretationPreview>
                      {keyword.interpretation}
                    </InterpretationPreview>
                  </Tooltip>
                </TableCell>
                <TableCell>
                  <TagList>
                    {keyword.relatedTags.map((tag, index) => (
                      <TagItem key={index}>
                        {tag}
                      </TagItem>
                    ))}
                  </TagList>
                </TableCell>
                <TableCell>{keyword.createdAt}</TableCell>
                <TableCell>
                  <div style={{ display: 'flex', gap: '8px' }}>
                    <button 
                      onClick={() => handleEditClick(keyword)}
                      style={{
                        padding: '4px 8px',
                        border: 'none',
                        backgroundColor: '#10b981',
                        color: 'white',
                        borderRadius: '4px',
                        cursor: 'pointer'
                      }}
                    >
                      <Edit size={14} />
                    </button>
                    <button 
                      onClick={() => handleDelete(keyword.id)}
                      style={{
                        padding: '4px 8px',
                        border: 'none',
                        backgroundColor: '#ef4444',
                        color: 'white',
                        borderRadius: '4px',
                        cursor: 'pointer'
                      }}
                    >
                      <Trash2 size={14} />
                    </button>
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </tbody>
        </Table>
        
        {filteredKeywords.length === 0 ? (
          <div style={{ textAlign: 'center', padding: '40px', color: '#64748b' }}>
            未找到匹配的关键词
          </div>
        ) : (
          <Pagination>
            <span>显示 {filteredKeywords.length} 个关键词</span>
            <div>
              {/* 分页控件可以在这里添加 */}
              页码: 1
            </div>
          </Pagination>
        )}
      </TableContainer>
      
      {/* 添加对话框 */}
      <Dialog open={isAddDialogOpen} onClose={() => setIsAddDialogOpen(false)} maxWidth="md" fullWidth>
        <DialogTitle>添加梦境关键词</DialogTitle>
        <DialogContent>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
            <div>
              <label style={{ display: 'block', marginBottom: '4px', fontSize: '14px', fontWeight: '500' }}>关键词 *</label>
              <input
                type="text"
                name="keyword"
                value={formData.keyword}
                onChange={handleInputChange}
                style={{
                  width: '100%',
                  padding: '10px',
                  border: '1px solid #d1d5db',
                  borderRadius: '6px',
                  fontSize: '14px'
                }}
                placeholder="输入关键词（如：飞翔、水、考试等）"
                required
              />
            </div>
            
            <div>
              <label style={{ display: 'block', marginBottom: '4px', fontSize: '14px', fontWeight: '500' }}>分类 *</label>
              <input
                type="text"
                name="category"
                value={formData.category}
                onChange={handleInputChange}
                style={{
                  width: '100%',
                  padding: '10px',
                  border: '1px solid #d1d5db',
                  borderRadius: '6px',
                  fontSize: '14px'
                }}
                placeholder="输入分类（如：自然、日常、情感等）"
                required
              />
            </div>
            
            <div>
              <label style={{ display: 'block', marginBottom: '4px', fontSize: '14px', fontWeight: '500' }}>解读内容 *</label>
              <textarea
                name="interpretation"
                value={formData.interpretation}
                onChange={handleInputChange}
                rows={5}
                style={{
                  width: '100%',
                  padding: '10px',
                  border: '1px solid #d1d5db',
                  borderRadius: '6px',
                  fontSize: '14px',
                  resize: 'vertical',
                  minHeight: '120px'
                }}
                placeholder="输入关键词的解读内容"
                required
              />
            </div>
            
            <div>
              <label style={{ display: 'block', marginBottom: '8px', fontSize: '14px', fontWeight: '500' }}>相关标签</label>
              <div style={{ display: 'flex', gap: '8px', marginBottom: '12px' }}>
                <input
                  type="text"
                  value={newTag}
                  onChange={(e) => setNewTag(e.target.value)}
                  onKeyPress={handleTagKeyPress}
                  style={{
                    flex: 1,
                    padding: '8px',
                    border: '1px solid #d1d5db',
                    borderRadius: '6px',
                    fontSize: '14px'
                  }}
                  placeholder="输入标签后按回车添加"
                />
                <button 
                  onClick={handleAddTag}
                  disabled={!newTag}
                  style={{
                    padding: '8px 16px',
                    border: 'none',
                    backgroundColor: newTag ? '#10b981' : '#d1d5db',
                    color: 'white',
                    borderRadius: '6px',
                    cursor: newTag ? 'pointer' : 'not-allowed',
                    fontSize: '14px'
                  }}
                >
                  添加
                </button>
              </div>
              
              <TagList>
                {formData.relatedTags.map((tag, index) => (
                  <TagItem key={index}>
                    {tag}
                    <button 
                      onClick={() => handleRemoveTag(tag)}
                      style={{
                        marginLeft: '4px',
                        background: 'none',
                        border: 'none',
                        color: '#166534',
                        cursor: 'pointer',
                        fontSize: '14px',
                        padding: '0',
                        width: '16px',
                        height: '16px',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        borderRadius: '50%',
                        lineHeight: '1'
                      }}
                    >
                      ×
                    </button>
                  </TagItem>
                ))}
              </TagList>
              
              {formData.relatedTags.length === 0 && (
                <p style={{ color: '#94a3b8', fontSize: '14px', marginTop: '8px' }}>添加相关标签可以帮助用户更好地理解和关联关键词</p>
              )}
            </div>
          </div>
        </DialogContent>
        <div style={{ padding: '16px', display: 'flex', justifyContent: 'flex-end', gap: '8px' }}>
          <Button onClick={() => setIsAddDialogOpen(false)}>取消</Button>
          <Button onClick={handleAddSave} variant="contained" style={{ backgroundColor: '#10b981' }}>保存</Button>
        </div>
      </Dialog>
      
      {/* 编辑对话框 */}
      <Dialog open={isEditDialogOpen} onClose={() => setIsEditDialogOpen(false)} maxWidth="md" fullWidth>
        <DialogTitle>编辑梦境关键词</DialogTitle>
        <DialogContent>
          {/* 编辑表单内容，与添加表单类似 */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
            <div>
              <label style={{ display: 'block', marginBottom: '4px', fontSize: '14px', fontWeight: '500' }}>关键词 *</label>
              <input
                type="text"
                name="keyword"
                value={formData.keyword}
                onChange={handleInputChange}
                style={{
                  width: '100%',
                  padding: '10px',
                  border: '1px solid #d1d5db',
                  borderRadius: '6px',
                  fontSize: '14px'
                }}
                placeholder="输入关键词（如：飞翔、水、考试等）"
                required
              />
            </div>
            
            <div>
              <label style={{ display: 'block', marginBottom: '4px', fontSize: '14px', fontWeight: '500' }}>分类 *</label>
              <input
                type="text"
                name="category"
                value={formData.category}
                onChange={handleInputChange}
                style={{
                  width: '100%',
                  padding: '10px',
                  border: '1px solid #d1d5db',
                  borderRadius: '6px',
                  fontSize: '14px'
                }}
                placeholder="输入分类（如：自然、日常、情感等）"
                required
              />
            </div>
            
            <div>
              <label style={{ display: 'block', marginBottom: '4px', fontSize: '14px', fontWeight: '500' }}>解读内容 *</label>
              <textarea
                name="interpretation"
                value={formData.interpretation}
                onChange={handleInputChange}
                rows={5}
                style={{
                  width: '100%',
                  padding: '10px',
                  border: '1px solid #d1d5db',
                  borderRadius: '6px',
                  fontSize: '14px',
                  resize: 'vertical',
                  minHeight: '120px'
                }}
                placeholder="输入关键词的解读内容"
                required
              />
            </div>
            
            <div>
              <label style={{ display: 'block', marginBottom: '8px', fontSize: '14px', fontWeight: '500' }}>相关标签</label>
              <div style={{ display: 'flex', gap: '8px', marginBottom: '12px' }}>
                <input
                  type="text"
                  value={newTag}
                  onChange={(e) => setNewTag(e.target.value)}
                  onKeyPress={handleTagKeyPress}
                  style={{
                    flex: 1,
                    padding: '8px',
                    border: '1px solid #d1d5db',
                    borderRadius: '6px',
                    fontSize: '14px'
                  }}
                  placeholder="输入标签后按回车添加"
                />
                <button 
                  onClick={handleAddTag}
                  disabled={!newTag}
                  style={{
                    padding: '8px 16px',
                    border: 'none',
                    backgroundColor: newTag ? '#10b981' : '#d1d5db',
                    color: 'white',
                    borderRadius: '6px',
                    cursor: newTag ? 'pointer' : 'not-allowed',
                    fontSize: '14px'
                  }}
                >
                  添加
                </button>
              </div>
              
              <TagList>
                {formData.relatedTags.map((tag, index) => (
                  <TagItem key={index}>
                    {tag}
                    <button 
                      onClick={() => handleRemoveTag(tag)}
                      style={{
                        marginLeft: '4px',
                        background: 'none',
                        border: 'none',
                        color: '#166534',
                        cursor: 'pointer',
                        fontSize: '14px',
                        padding: '0',
                        width: '16px',
                        height: '16px',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        borderRadius: '50%',
                        lineHeight: '1'
                      }}
                    >
                      ×
                    </button>
                  </TagItem>
                ))}
              </TagList>
            </div>
          </div>
        </DialogContent>
        <div style={{ padding: '16px', display: 'flex', justifyContent: 'flex-end', gap: '8px' }}>
          <Button onClick={() => setIsEditDialogOpen(false)}>取消</Button>
          <Button onClick={handleEditSave} variant="contained" style={{ backgroundColor: '#10b981' }}>保存</Button>
        </div>
      </Dialog>
    </Container>
  );
};

export default DreamKeywordManagement;